html, body {
  margin: 0;
  padding: 0;
  background-color: plv(colorBgContainer);
  height: auto !important;
}

:root {

  --app-head-height: 64px;
  --app-menu-padding-left: 40px;
  --app-menu-padding-top: 40px;
  --app-border-color: #{plv(colorBorderSecondary)};
  --app-title-color: #{plv(colorText)};

  @media screen and (min-width: 1920px) {
    --app-menu-wdith: 325px;
  }
  @media screen and (min-width: 1366px) and (max-width: 1919px) {
    --app-menu-wdith: 265px;
  }
  @media screen and (max-width: 1365px) {
    --app-menu-wdith: 225px;
  }
}

html, body, #app {
  /*height: 100%;
  width: 100%;*/
}

.app-home {

  .app-head {
    height: var(--app-head-height);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: solid 1px var(--app-border-color);
    background-color: plv(colorBgContainer);

    .app-head-logo {
      font-size: 24px;
      width: var(--app-menu-wdith);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 var(--app-menu-padding-left);
      position: relative;
      font-weight: 700;

      &:after {
        position: absolute;
        right: 0;
        top: 30%;
        bottom: 30%;
        width: 1px;
        background-color: var(--app-border-color);
        content: '';
      }

      span {
        background: linear-gradient(#c41d7f, #08979c, #096dd9);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: 700;
        white-space: nowrap;
      }
    }

    .app-head-operation {
      display: flex;
      align-items: center;
      padding: 0 var(--app-menu-padding-left) 0 0;
    }

    img {
      height: 18px;
      transform: translateY(0.3em);
    }
  }

  .app-body {
    padding-left: var(--app-menu-wdith);
    min-height: calc(100vh - var(--app-head-height) - 2px);
    position: relative;

    .app-menu {
      width: var(--app-menu-wdith);
      position: fixed;
      top: var(--app-head-height);
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      padding-top: var(--app-menu-padding-top);

      &:after {
        position: absolute;
        top: var(--app-menu-padding-top);
        bottom: 0;
        right: 0;
        width: 1px;
        background-color: var(--app-border-color);
        content: '';
      }

      .app-menu-group {
        font-size: 14px;

        .app-menu-group-name {
          line-height: 36px;
          margin: 16px 0;
          color: plv(colorText);
          position: relative;
          padding: 8px 0 8px var(--app-menu-padding-left);
          font-weight: bold;

          &:after {
            position: absolute;
            bottom: 0;
            left: var(--app-menu-padding-left);
            right: var(--app-menu-padding-left);
            height: 1px;
            background-color: var(--app-border-color);
            content: '';
          }
        }

        .app-menu-item {
          height: 40px;
          line-height: 40px;
          box-sizing: border-box;
          padding-left: var(--app-menu-padding-left);
          margin: 4px 0 8px 0;
          color: plv(colorTextSecondary);
          cursor: pointer;
          border-right: solid 4px transparent;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
          justify-content: space-between;


          & > div:first-child {
            span + span {
              margin-left: 8px;
            }
          }

          & > .anticon {
            color: plv(colorPrimary);
            margin-right: var(--app-menu-padding-left);
          }

          &[data-active=true] {
            border-right: solid 4px plv(colorPrimary);
            background-color: plv(colorPrimaryBg);
            transition: all ease 200ms;
          }

          &:not([data-active=true]) {
            transition: all ease-out 500ms;
          }
        }

        &:first-child {
          .app-menu-group-name {
            margin-top: 0;
            padding-top: 0;
          }
        }
      }
    }

    .app-content {
      min-height: inherit;
      box-sizing: border-box;
      padding: var(--app-menu-padding-top) 50px 50px;
      color: plv(colorTextSecondary);

      .app-empty-text {
        color: plv(colorText);
      }
    }
  }
}





